import { FireOutlined } from "@ant-design/icons";
import { Flex, Typography } from "antd";
import { formatNumberToWan } from "../Common/commonData";
import styles from "./ZhiHuCard.module.css";
import { useUser } from "@/hook/useUser/useUser";

const { Text, Title } = Typography;

export function ZhiHuCard({ item = {}, style = {} }) {
  const { openInNewWindow } = useUser();
  const target = openInNewWindow ? "_blank" : "_self";
  return (
    <Flex
      style={{
        backgroundColor: "white",
        borderRadius: 8,
        boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
        padding: 16,
        transition: "all 0.3s ease",
        "&:hover": {
          boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
          transform: "translateY(-2px)",
        },
        ...style,
      }}
      gap={16}
      align="flex-start">
      {/* 左侧序号 */}
      <Flex
        justify="center"
        align="center"
        className={`${styles.order} ${styles[`order-${item.order}`]}`}>
        {item.order}
      </Flex>

      {/* 右侧内容区域 */}
      <Flex vertical flex={1} style={{ height: "100%" }}>
        {/* 标题和热度 */}
        <Flex justify="space-between" align="flex-start">
          <a
            href={item.url}
            target={target}
            className={styles["title-link"]}
            style={{ textDecoration: "none", flex: 1 }}>
            <Title
              level={5}
              className={styles.title}
              style={{
                margin: 0,
                color: "#222",
              }}>
              {item.title}
            </Title>
          </a>

          <Flex align="center" gap={4}>
            <FireOutlined style={{ color: "#ff4d4f" }} />
            <Text strong style={{ color: "#ff4d4f" }}>
              {formatNumberToWan(item.extra_content.hot)}
            </Text>
            <Text type="secondary" style={{}}>
              热度
            </Text>
          </Flex>
        </Flex>

        {/* 简介 */}
        <Typography.Paragraph
          ellipsis={{
            rows: item.title.length > 35 ? 1 : 2,
          }}
          style={{
            margin: "8px 0 0",
            color: "#666",
            fontSize: 14,
            maxWidth: "40rem",
          }}>
          {item.extra_content.intro}
        </Typography.Paragraph>
      </Flex>
    </Flex>
  );
}
